<template>
    <div class="tab">
        <!-- 上层tab -->
        <cube-tab-bar
            :showSlider=true
            :useTransition=false
            v-model="selectedLabel"
            :data="tabs"
            ref="tabBar"
            class="border-bottom-1px"
        >
        </cube-tab-bar>
        <!-- tab下层内容 goods、seller -->
        <div class="slide-wrapper">
            <cube-slide
                :loop=false
                :auto-play=false
                :show-dots=false
                :initial-index="index"
                ref="slide"
                @change="onChange"
                @scroll="onScroll"
                :options="slideOptions"
            >
                <cube-slide-item v-for="(tab, index) in tabs" :key="index">
                    <!-- 动态组件 -->
                    <component :is="tab.component" :data="tab.data" ref="component"></component>
                </cube-slide-item>
            </cube-slide>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'tab',
        props: {
            tabs: {
                type: Array,
                default() {
                    return []
                }
            },
            // 初始化索引，定位初始的tab-bar索引值
            initialIndex: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                // 当前选中tab的索引
                index: this.initialIndex,
                // 传入参数 实时监听滑动位置
                slideOptions: {
                    // 监听tab-bar下方轮播图组件的滑动事件
                    listenScroll: true,
                    probeType: 3,
                    // 防止与之后的竖直滚动冲突
                    directionLockThreshold: 0
                }
            }
        },
        computed: {
            // 当前选中的lebel数据
            selectedLabel: {
                // 返回当前选中的lebel数据
                get() {
                    return this.tabs[this.index].label
                },
                set(newVal) {
                    // 通过findIndex方法 找到符合箭头函数的第一个数组元素索引
                    this.index = this.tabs.findIndex((value) => {
                        return value.label === newVal
                    })
                }
            }
        },
        // 生命周期的构子，当el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
        mounted() {
            // 为第一次地加载调用方法以获取数据
            this.onChange(this.index)
        },
        methods: {
            // 当slide变化时，tab做出相应
            onChange(current) {
                this.index = current
                // 获取当前展示的组件
                const component = this.$refs.component[current]
                // 如果组件有定义fetch方法 则调用该方法获取数据
                component.fetch && component.fetch()
            },
            onScroll(pos) {
                // 取得tab组件宽度
                const tabBarWidth = this.$refs.tabBar.$el.clientWidth
                // 取得这个scrolller的宽度
                const slideWidth = this.$refs.slide.slide.scrollerWidth
                // 取得滑动的横坐标 并按比例计算出tab的下划线相应的移动距离
                const transform = (-pos.x / slideWidth) * tabBarWidth
                // 设置tab滚动值
                this.$refs.tabBar.setSliderTransform(transform)
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import "~common/stylus/variable"

    .tab
        display       : flex
        // tab-bar跟下面的内容（goods、seller）上下布局
        flex-direction: column
        height        : 100%
        /* >>> 修改子组件样式 vue loader */
        >>> .cube-tab
            padding: 12px 0
        .slide-wrapper
            flex    : 1
            overflow: hidden
</style>
